/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/04/12
 *@description  textarea  component textarea 组件
 */
/**
 * #item
 *
 * @type        aty-textarea
 * @cn          多行输入框
 * @nameprop   label
 * @menu        表单
 * @stPlugin    true
 * @stContainer false
 * @mixins      [./components/mixins/form-item-props.js]
 */
import config from '../../../config/config.js'
// utils
import calcTextareaHeight from '../../../utils/calcTextareaHeight.js'
// mixins
import formItem from '../form-item/form-item.js'
// prefix
const prefixCls = config.prefix + '-textarea'
// module
const module = {
  name: config.prefix + '-textarea',
  // 混入
  mixins: [formItem],
  props: {
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    string,number
     * @description  textarea的值
     */
    value: {
      type: [String, Number],
      default: ''
    },
    /**
     * #property
     *
     * @name    elementId
     * @cn      input id
     * @group   基本属性
     * @type    string
     * @description 该输入框上的id
     */
    elementId: {
      type: String
    },
    /**
     * #property
     *
     * @name    autosize
     * @cn      自动大小
     * @group   控制
     * @type    boolean,object
     * @value  false
     * @bind   must
     * @description 该输入框是否自动大小，设置值，可以是 boolean也可以是object
     *  object={
     *          minRows:2,
     *          maxRows:5
     *      }
     */
    autosize: {
      type: [Boolean, Object],
      default: false
    }
  },
  data() {
    return {
      textareaStyles: {}
    }
  },
  // 监听值发生变化
  watch: {
    value () {
      this.$nextTick(() => {
        this.resizeTextarea()
      })
    }
  },
  // 计算属性
  computed: {
    // 外围class
    wrapClasses() {
      return [
        `${prefixCls}-wrapper`
      ].concat(this.formItemClasses)
    },
    wrapStyles() {
      return this.formItemStyles
    },
    // textarea 的class
    textareaClasses() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-disabled`]: this.disabled
        },
        {
          [`${config.prefix}-ovhy`]: this.autosize === true // 解决: http://code.thunisoft.com/artery/artery-ui/issues/90
        }
      ]
    },
    inputAttrs: function () {
      return Object.assign({
          rows: 2, // 默认2行
          wrap: 'soft',
          autocomplete: 'off',
          spellcheck: false
        },
        this.$attrs
      )
    },
    inputListeners: function () {
      const _this = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 从父级添加所有的监听器
        this.$listeners,
        // 自定义监听器，或覆写一些监听器的行为
        {
          blur: function (event) {
            /**
             * #event
             *
             * @name    blur
             * @param   value  当前的值
             * @param   event   当前值对应的event事件
             * @description   原生失焦触发事件
             * @body
             */
            _this.$emit('blur', event.target.value, event)
            _this.validate()
          },
          input: function (event) {
            /**
             * #event
             *
             * @name    input
             * @param   value  当前的值
             * @param   event   当前值对应的event事件
             * @description   原生input触发事件
             * @body
             */
            _this.$emit('input', event.target.value, event)
            // 双向绑定
          },
          change: function (event) {
            /**
             * #event
             *
             * @name    change
             * @param   value   当前的值
             * @param   event   当前值对应的event事件
             * @description   原生值改变触发事件
             * @body
             */
            _this.$emit('change', event.target.value, event)
            _this.validate()
          }
        }
      )
    }
  },
  methods: {
    // 重置为初始值
    reset () {
      if (this.disabled) {
        return false
      }
      this.$refs.textarea.value = this._originalValue
      this.$emit('input', this._originalValue)
      this.$emit('change')
    },
    // 调整 textarea的大小
    resizeTextarea() {
      const autosize = this.autosize
      if (!autosize) {
        return false
      }
      const minRows = autosize.minRows
      const maxRows = autosize.maxRows
      this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows)
    }
  },
  mounted() {
    this.resizeTextarea()
  },
  created () {
    // 保存初始值，用于reset
    this._originalValue = Artery.deepCopy(this.value)
  }
}
export default module
